<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0" />
    <title>小儿推拿</title>

    <%@ include file="/include/datetables.jsp"%>
</head>
<body>

<div class="Baby_Healthy_home">
    <!--左侧-->
    <jsp:include page="/include/menu.jsp" flush="true">
        <jsp:param name="index" value="6"/>
    </jsp:include>
    <!--右侧-->
    <div class="Baby_Healthy_home_right">
        <div class="Baby_Healthy_home_right_top">
            <ul class="Baby_Healthy_home_right_top_list card_bgc">
                <li class="num1 js_power_24"><a href="${pageContext.request.contextPath}/card/gotoCardManagement">卡项管理</a></li>
                <li class="num2 bespeak_active js_power_25"><a href="${pageContext.request.contextPath}/card/gotoCouponManagement">优惠券管理</a></li>
            </ul>
        </div>

       <!--优惠券-->
        <div class="Baby_Healthy_home_right_bespeak_list">
            <div class="Baby_Healthy_home_right_bespeak_search card_bgc_fff js_couponpage">
                <%--<button class="storeSetting_btn_color btn_active_color"><a class="btn_fontColor btn_active_fontColor" href="${pageContext.request.contextPath}/card/couponContent">添加优惠券</a></button>--%>
                <a class="btn btn-info js_addbespeak btn-sm js_power_27" href="${pageContext.request.contextPath}/card/couponContent" style="height: 28px">添加优惠券</a>
                <!-- <button class="Baby_Healthy_home_right_bespeak_btn"><a class="btn_link_color" href="${pageContext.request.contextPath}/card/couponContent">添加优惠券</a></button> -->
                <%--<div class="Baby_Healthy_home_right_bespeak_btn_searchbox">--%>
                    <%--<select class="bespeak_search_input card_selset_margin" style="border-radius: 0rem;">--%>
                        <%--<option value="">全部卡类</option>--%>
                    <%--</select>--%>
                    <%--<input class="bespeak_search_input" type="text" placeholder="会员名或手机号">--%>
                    <%--<button class="bespeak_search_button">搜索</button>--%>
                <%--</div>--%>
            </div>
            <div class="zccard_container">
                <table class="zctable table table-striped table-no-bordered table-hover newCardList">
                    <thead>
                        <tr class="">
                            <th class="">优惠券</th>
                            <th class="">卡内容</th>
                            <th class="">已发数量/总数</th>
                            <th class="">创建日期</th>
                            <th class="">操作</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <%--发放优惠券--%>
    <div class="hidden dialogelm sendcoupon">
        <div class="bespeak_search_container_seive">
            <div  class="form-inline search_choice_elm">
                <label class="search_label">选择门店：</label>
                <select  type="text" class="picker_style subclinic select_arrow js_power_45" id="subclinic_info" placeholder="请选择门店">
                    <option class="picker_style" value="0">全部门店</option>
                </select>
            </div>
            <div class="form-inline search_choice_elm last">
                <label class="search_label">
                        <input id="userPhoneInput" class="form-control" type="text" style="width:180px" placeholder="请输入会员姓名或手机号">
                        <button id="searchUserBtn" class="" style="line-height: 30px;width: 63px;margin-left: 10px;">搜索</button>
                </label>
            </div>
            <!-- <div class="Baby_Healthy_home_right_bespeak_btn_searchbox" style="margin-left:5rem;">
                <input id="userPhoneInput" class="bespeak_search_input" type="text" placeholder="请输入会员手机号">
                <button id="searchUserBtn" class="" style="line-height: 30px;width: 63px;margin-left: 10px;">搜索</button>
            </div> -->
        </div>
        <div class="zcwrap" style="height: 85%;">
            <!-- <table class="zctable table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%"> -->
            <table class="bespeak_change_look" id="bespeak_stat_info" style="margin-left: 0;width:100%;">
                <thead>
                <tr>
                    <th value="0" class="doctorName" style="text-align:center;padding-left: 0.3rem"><input id="checkboxAll" type="checkbox" value="-1" class="checkBox"></th>
                    <th value="0" id="userName" class="doctorName" style="text-align:center;padding-left: 0rem">会员姓名</th>
                    <th value="0" id="userPhone" class="doctorName" style="text-align:center;padding-left: 0rem">手机号</th>
                </tr>
                </thead>
                <tbody id="userTbody">
                </tbody>
            </table>
        </div>
        <div class="rows">
            <div class="cols6">
                &nbsp;
            </div>
            <div class="cols14 buttongroup">
                <button class="storeSetting_btn_color btn_active_color" id="sendBtn"><a class="btn_fontColor btn_active_fontColor" href="javascript:void(0)">发放</a></button>
                <button class="storeSetting_btn_color" id="sendCancel"><a class="btn_fontColor" href="javascript:void(0)">取消</a></button>
            </div>
        </div>
    </div>

    <%--分享优惠券--%>
    <div class="hidden dialogelm sharecoupon" style="margin-left: 80px;">
        <div id="shareQr"></div>
        <div>
            <p>手机扫描二维码即可分享优惠券</p>
        </div>
        <div id="">
            <p>优惠券领取地址：</p>
            <input id="short_url" value="http://t.cn/R8HMMpa">
            <a id="copyboard" class="btn btn-info btn-sm" href="javascript:void(0)" style="height: 28px"
               data-clipboard-action="copy" data-clipboard-target="#short_url">复制地址</a>
        </div>
    </div>
</div>
</body>
<script src="${pageContext.request.contextPath}/js/zcbase.js"></script>
<script src="${pageContext.request.contextPath}/js/coupon.js"></script>
<script src="${pageContext.request.contextPath}/js/resource/jquery.qrcode.min.js"></script>
<script src="${pageContext.request.contextPath}/js/resource/clipboard.min.js"></script>
<script>
    function clickSend(couponId,cardType,validDay) {
        var baseD = baseFn.dialog({
            title:'发放优惠券',
            width:'50em',
            height:'70vh',
            content:$('.dialogelm.sendcoupon'),
            ok:false,
            // cancel:function () {
            //     initBaseCouponData();
            // }
        })
        //获取未领券的用户列表
        selectUserList(couponId);

        //取消
        $('#sendCancel').off('click').on('click',function(){
            initBaseCouponData();
            baseD.close()
        })
        //发送
        $('#sendBtn').off('click').on('click',function(){
            var userCouponArray = [];
            $("input[type='checkbox']").each(function () {
                if ($(this).hasClass("checkBox_checked")) {
                    var couponData = {};
                    couponData.userId = $(this).val();
                    couponData.couponId = couponId;
                    couponData.cardType = cardType;
                    couponData.validDay = validDay;
                    userCouponArray.push(couponData)
                }
            });
            $.post(baseUrl.base + "card/saveUserCoupon", {userCouponArray: JSON.stringify(userCouponArray)}, function (res) {
                if (res.code == "0") {
                    baseFn.infoDialog('发放优惠券成功');
                    initBaseCouponData();
                } else {
                    baseFn.infoDialog(res.msg);
                }
                baseD.close();
            })
        })
    }

    function clickShare(couponId) {

        if (isNotNullFun(couponId)) {
            $.ajax({
                url: baseUrl.base + "card/selectSysDiscountInfo",
                type: 'get',
                data: {cardId: couponId},
                success: function (data) {
                    if (data.code == "0") {
                        var shareShortUrl = data.results.shareShortUrl;
                        $("#short_url").val(shareShortUrl);
                        // 生成分享二维码
                        $('#shareQr').empty();
                        $('#shareQr').qrcode(shareShortUrl);
                    }
                }
            })
        }

        var baseD = baseFn.dialog({
            title:'分享优惠券',
            width:'30em',
            content:$('.dialogelm.sharecoupon'),
            ok:false
        })
    }

    // 卡券初始数据
    function initBaseCouponData() {
        $("input[type='checkbox']").removeClass("checkBox_checked")
    }

    // 查询用户列表
    function selectUserList(couponId) {
        var subclinicId = $('#subclinic_info option:selected').val();
        var userPhone = $("#userPhoneInput").val();

        var data = {};
        if (isNotNullFun(subclinicId)) {
            data.subclinicId = subclinicId;
        }
        if (isNotNullFun(userPhone)) {
            data.userPhone = userPhone;
        }
        data.couponId = couponId;
        $.ajax({
            type: "GET",
            url: baseUrl.base + "card/selectUnUseCouponList",
            data: data,
            success: function (result) {
                if (result.code == 0) {
                    $("#userTbody").empty();
                    for (var i = 0; i < result.results.length; i++) {
                        var user = result.results[i];
                        var html = ' <tr>\
                                <td><input type="checkbox" value="'+user.userId+'" class="checkBox" rel="user"></td>\
                                <td>' + user.userName + '</td>\
                                <td>' + user.userPhone + '</td>\
                                </tr>';
                        $("#userTbody").append(html);
                    }

                    $("input[type='checkbox']").click(function () {
                        if ($(this).hasClass("checkBox_checked")) {
                            $(this).removeClass("checkBox_checked")
                        } else {
                            $(this).addClass("checkBox_checked")
                        }
                    });
                }
            }
        });
    }

    //门店下拉列表
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: baseUrl.base + "subclinic/selectSubclinicList",
            data: '',
            success: function (result) {
                if (result.code == 0) {
                    // $(".subclinic").append("<option class='picker_style' value=0>全部门店</option>")
                    for (var i = 0; i < result.results.length; i++) {
                        $(".subclinic").append("<option class='picker_style' value=" + result.results[i].subclinicId + ">" + result.results[i].subclinicName + "</option>")
                    }
                }
            }
        });

        // 查询用户列表
        //selectUserList();

        // 点击搜索按钮
        $("#searchUserBtn").click(function () {
            initBaseCouponData();
            selectUserList();
        });

        //门店下拉框改变
        $("#subclinic_info").change(function () {
            initBaseCouponData();
            selectUserList();
        })

        // 全选按钮
        $("#checkboxAll").click(function () {
            var that = this;
            $("input[type='checkbox'][rel='user']").each(function () {
                if ($(that).hasClass("checkBox_checked")) {
                    $(this).removeClass("checkBox_checked")
                } else {
                    $(this).addClass("checkBox_checked")
                }
            })
        });

        // 负责到剪切板
        var clipboard = new ClipboardJS('#copyboard');
        clipboard.on('success', function(e) {
            baseFn.infoDialog('复制成功');
        });
        clipboard.on('error', function(e) {
            console.log(e);
        });
    });
</script>
</html>